<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>04jQueryDOM增删改</title>
    <script src="../03jquery/js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 内部插入
            // appendTo()       a.appendTo(b)       把a插入到b子元素末尾，成为最后一个子元素
            // prependTo()      a.prependTo(b)      把a插到b所有子元素前面，成为第一个子元素
            // 外部插入:
            // insertAfter()    a.insertAfter(b)    得到ba
            // insertBefore()   a.insertBefore(b)   得到ab
            // 替换:
            // replaceWith()    a.replaceWith(b)    用b替换掉a
            // replaceAll()     a.replaceAll(b)     用a替换掉所有b
            // 删除:
            // remove()         a.remove();         删除a标签
            // empty()          a.empty();          清空a标签里的内容
            $("#p1").append("<b>Hello</b>");  // 结果: [ <p>I would like to say: <b>Hello</b></p> ]
            $("#p2").appendTo("div");
        });
    </script>
</head>
<body>
<p id="p1">我想说:</p>
<p id="p2">段落二:</p>

<div style="color: red"></div>
<div style="color: red"></div>

</body>
</html>